<script setup>
import { ElCard, ElTooltip } from 'element-plus'
import { Icon } from '@iconify/vue'

defineProps({
	title: {
		type: String,
		default: '',
	},
	message: {
		type: String,
		default: '',
	},
})
</script>

<template>
	<ElCard shadow="never" class="elCard">
		<template v-if="title" #header>
			<div class="flex items-center">
				<span class="text-16px font-700">{{ title }}</span>
				<ElTooltip v-if="message" effect="dark" placement="right">
					<template #content>
						<div class="max-w-200px">{{ message }}</div>
					</template>
					<Icon class="ml-5px" icon="vi-bi:question-circle-fill" :size="14" />
				</ElTooltip>
				<div class="flex flex-grow">
					<slot name="header"></slot>
				</div>
			</div>
		</template>
		<div class="card-content">
			<slot></slot>
		</div>
	</ElCard>
</template>

<style lang="scss">
.elCard {
	.el-card__header {
		height: 54px;
	}
	.el-card__body {
		margin: 0 !important;
		padding: 0 !important;
		height: calc(100% - 54px) !important;

		.card-content {
			height: 100%;
		}
	}

	// 当没有 header 时，body 高度为 100%
	&:not(:has(.el-card__header)) {
		.el-card__body {
			height: 100% !important;
		}
	}
}

.font-700 {
	font-weight: 700;
}

.text-16px {
	font-size: 16px;
}
</style>
